<template>
  <div>
    <!-- <el-form :model="query" label-position="left" ref="queryForm" :inline="true" label-width="70px" class="top-search">
      <el-form-item label="电话" prop="phone" label-width="40px">
        <el-input v-model="query.phone" placeholder="请输入电话" clearable @keyup.enter.native="getList(1)" />
      </el-form-item>
      <el-form-item label="客户备注名" prop="customerName" label-width="90px">
        <el-input
          v-model="query.customerName"
          placeholder="请输入客户备注名"
          clearable
          @keyup.enter.native="getList(1)" />
      </el-form-item>
      <el-form-item label-width="0">
        <el-button type="primary" @click="getList(1)">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form> -->

    <div class="g-card">
      <el-table ref="myTable" v-loading="loading" :data="list">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="客户" prop="customerName" header-align="center" align="" width="180">
          <template slot-scope="{ row }">
            <div class="cp flex aic">
              <el-image class="avatar" :src="row.avatar" fit="fit"></el-image>
              <div class="ml10">
                <p class="blod">{{ row.customerName }}</p>
                <i :class="['el-icon-s-custom', { 1: 'man', 2: 'woman' }[row.gender]]"></i>
                <span :style="{ color: row.customerType === 1 ? '#4bde03' : '#f9a90b' }">
                  {{ { 1: '@微信', 2: '@企业微信' }[row.customerType] }}
                </span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="客户备注姓名" align="center" prop="customerName" show-overflow-tooltip />
        <el-table-column label="电话号码" align="center" prop="phone" min-width="180px" show-overflow-tooltip />
        <el-table-column label="员工名称" align="center" prop="userName" />
        <el-table-column label="更新时间" align="center" prop="updateTime" width="180" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="{ row }">
            <el-button type="text" @click="assignFn(row.externalUserid)">分配</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="query.pageNum"
          :limit.sync="query.pageSize"
          @pagination="getList()" />
      </div>
    </div>

    <!-- 分配 -->
      <el-dialog
        title="分配客户"
        :close-on-click-modal="false"
        :show-close="false"
        :visible.sync="dialogVisibleAssign"
        width="37%">
        <el-form ref="form" :model="form" :rules="formRules" label-position="right">
          <el-form-item label="客户经理" prop="firstUserId" label-width="100px" required>
            <el-select clearable v-model="form.firstUserId" filterable>
              <el-option v-for="(item,index) in assignList" :label="item.userName" :value="item.firstUserId"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button
            @click="
            dialogVisibleAssign = false
            ">
            取 消
          </el-button>
          <el-button type="primary" @click="submitAssign" v-loading="submitLoading">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import { getList, uploadObj, getCustomerList } from '@/api/drainageCode/repetition'

export default {
  name: 'Repetition',
  data() {
    return {
      dialogVisibleAssign: false,
      assignList: [],
      submitLoading: false,
      // 查询参数
      query: {
        pageNum: 1,
        pageSize: 10,
        customerName: undefined,
        phone: undefined,
        addUserName: undefined,
        addState: undefined,
        name: undefined
      },
      // 日期范围
      dateRange: [],
      dialogVisible: false,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 表单参数
      form: {
        firstUserId: '',
        externalUserid: ''
      },
      formRules: {
        firstUserId: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
      },

    }
  },
  created() {
    this.getList()
    // this.$store.dispatch(
    //   'app/setBusininessDesc',
    //   `
		// 	     <div>管理员在后台将客户导入后，系统根据分配规则自动分配给员工，员工可以一键复制客户手机号，快速添加客户，并支持添加效果统计。</div>
		// 	   `,
    // )
  },
  mounted() {},
  methods: {
    getList(page) {
      page && (this.query.pageNum = page)
      this.loading = true
      getList(this.query)
        .then(({ rows, total }) => {
          this.list = rows
          this.total = +total
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = []
      this.$refs['queryForm'].resetFields()
      this.getList(1)
    },

    /** 分配按钮操作 */
    assignFn(externalUserid) {
      this.dialogVisibleAssign = true
      this.form.externalUserid = externalUserid
      getCustomerList({ externalUserid }).then((res) => {
        this.assignList = res.data
      })
    },
    //添加客户
    submitAssign(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          uploadObj({
            addUserId: this.form.firstUserId,
            externalUserid: this.form.externalUserid
          })
            .then((res) => {
              if (res.code === 200) {
                this.msgSuccess(res.data)
                this.getList()
                this.dialogVisibleAssign = false
                this.form.firstUserId = ''
                this.form.externalUserid = ''
              } else {
                this.msgError(res.msg)
              }
              this.submitLoading = false
            })
            .catch(() => {})
        } else {
          return false;
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__header {
  margin-bottom: 0;
}
::v-deep .el-dialog__footer {
  // text-align: right !important;
}
.avatar {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: var(--border-radius-big);
}

.dialog-footer {
  padding-right: 100rpx
}

</style>
